<template>
  <Layout>
          <div class="content-header">
            <h2>为你推荐</h2>
            <a-radio-group v-model:value="timeRange" button-style="solid">
              <a-radio-button value="today">今天</a-radio-button>
              <a-radio-button value="week">本周</a-radio-button>
              <a-radio-button value="month">本月</a-radio-button>
            </a-radio-group>
          </div>
          <div class="featured-carousel">
            <a-carousel autoplay>
              <div v-for="i in 4" :key="i">
                <div class="carousel-content">
                  <a-spin :spinning="loading[`carousel${i}`]" tip="加载中...">
                    <img 
                      :src="`https://picsum.photos/1200/400?random=${i}`" 
                      :alt="`精选图片 ${i}`" 
                      class="carousel-image" 
                      loading="lazy"
                      @load="handleImageLoad(`carousel${i}`)"
                    />
                  </a-spin>
                  <div class="carousel-caption">
                    <h3>精选摄影作品 {{i}}</h3>
                    <p>发现更多精彩瞬间</p>
                  </div>
                </div>
              </div>
            </a-carousel>
          </div>
          <div class="post-list">
            <a-card v-for="i in 5" :key="i" class="photo-card" hoverable>
              <template #cover>
                <a-spin :spinning="loading[`post${i}`]" tip="加载中...">
                  <img
                    :alt="`作品 ${i}`"
                    :src="`https://picsum.photos/400/300?random=${i}`"
                    class="portfolio-image"
                    loading="lazy"
                    @load="handleImageLoad(`post${i}`)"
                  />
                </a-spin>
              </template>
              <template #actions>
                <span><like-outlined /> {{Math.floor(Math.random() * 1000)}}</span>
                <span><camera-outlined /> f/2.8</span>
                <span><eye-outlined /> {{Math.floor(Math.random() * 5000)}}</span>
              </template>
              <a-card-meta :title="`风光摄影作品 ${i}`">
                <template #description>
                  <div class="photo-meta">
                    <a-tag :color="getRandomTagColor()">{{getRandomCategory()}}</a-tag>
                    <span>尼康Z9</span>
                    <span>·</span>
                    <span>ISO 100</span>
                    <span>·</span>
                    <span>1/250s</span>
                  </div>
                </template>
              </a-card-meta>
            </a-card>
          </div>
  </Layout>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { LikeOutlined, MessageOutlined, StarOutlined, CameraOutlined, EyeOutlined } from '@ant-design/icons-vue';
import { Spin, Tag } from 'ant-design-vue';
import Layout from '../components/Layout.vue';

const timeRange = ref('today');

// 图片加载状态管理
const loading = reactive({});

const handleImageLoad = (key: string) => {
  loading[key] = false;
};

// 初始化加载状态
for (let i = 1; i <= 4; i++) {
  loading[`carousel${i}`] = true;
}
for (let i = 1; i <= 5; i++) {
  loading[`post${i}`] = true;
}

// 随机分类
const categories = ['风光', '人像', '街拍', '纪实', '黑白', '建筑', '自然'];
const tagColors = ['blue', 'green', 'orange', 'purple', 'cyan', 'magenta', 'volcano'];

const getRandomCategory = () => {
  return categories[Math.floor(Math.random() * categories.length)];
};

const getRandomTagColor = () => {
  return tagColors[Math.floor(Math.random() * tagColors.length)];
};
</script>

<style scoped>
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.post-list {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  padding: 16px;
}

.photo-card {
  margin-bottom: 0;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background-color: #f0f0f0;
}

.photo-card :deep(.ant-spin) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.photo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.portfolio-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  transition: all 0.3s ease;
  aspect-ratio: 4/3;
  display: block;
}

.photo-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #8c8c8c;
  margin-top: 8px;
}

.post-stats {
  margin-left: auto;
  display: flex;
  gap: 16px;
  font-size: 14px;
}

.post-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.post-stats span:hover {
  color: #6893AC;
}

.featured-carousel {
  margin-bottom: 24px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.carousel-content {
  position: relative;
  height: 400px;
  background-color: #f0f0f0;
}

.carousel-content :deep(.ant-spin) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3/1;
  display: block;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
}

.carousel-caption h3 {
  margin: 0;
  font-size: 24px;
  color: white;
}

.carousel-caption p {
  margin: 8px 0 0;
  font-size: 16px;
  opacity: 0.9;
}
</style>